<template>
    <div class="login-pages">
        <div class="main_content">
            <img src="@/assets/imgs/logo.png" alt="" class="logo">
            <van-cell-group>
                <van-field v-model="info.username" maxlength="11" placeholder="请输入手机号" class="has-bottom-border" />
                <van-field v-model="info.checkCode" maxlength="6" placeholder="请输入验证码" v-if="loginType">
                    <template #button>
                        <div class="send-code-btn" :class="{'allowed':info.username.length}" v-if="count>=60" @click="getCode">获取验证码
                        </div>
                        <div v-else>{{count}} s</div>
                    </template>
                </van-field>
                <van-field v-model="info.password" :type="passFlag?'text':'password'" placeholder="请输入密码" v-else ref="passInput">
                    <template #button>
                        <van-icon name="eye" class="password-icon" @click="showPass" :class="{'is-show':passFlag}" />
                    </template>
                </van-field>
            </van-cell-group>
            <van-button type="info" style="width: 100%;margin-top:25px;border-radius: 22px;" @click="toLogin">
                <van-loading type="spinner" size="18px" v-if="isLogin" />
                <span v-else>登录</span>
            </van-button>
            <div class="pass-login" @click="handType">{{TypeText}}</div>
        </div>
        <div class="flex-between bottom-link">
            <span @click="navTo('/register')">去注册</span>
            <span @click="navTo('/update_pass')">忘记密码</span>
        </div>
    </div>
</template>

<script>
    import {
        isPhone
    } from "@/utils/index";
    import {
        setToken,
        setUserInfo
    } from "@/utils/auth";
    import {
        pass_login
    } from '@/api/login';
    import {createTelphonCode} from '@/api/common'
    import mixins from '@/mixins/mixins';

    export default {
        mixins: [mixins],
        data() {
            return {
                isLogin: false,
                loginType: false, //true 验证码 fasle 密码
                passFlag: false,
                TypeText: '验证码登录',
                count: 60,
                allowed: false,
                timer: null,
                info: {
                    systemId: 33000000001,//系统id-自查
                    username: "18571734030",
                    password: "xn123456",
                    checkCode: "",
                }
            }
        },
        destroyed() {
            clearInterval(this.timer);
        },
        methods: {
            //登录
            toLogin() {
                if (this.clickTorrtle('login')) return;
                this.isLogin = true;
                pass_login(this.info).then(res => {
                    this.isLogin = false;
                    if (res.success) {
                        const {
                            token,
                            userZcVo
                        } = res.value;
                        const {
                            id,
                            userId,
                            name,
                            compSpec,
                            sex,
                            email,
                            qq,
                            reject_reason,
                            orgname,
                            idcard,
                            areacode,
                            telphone,
                            compName,
                            userType,
                            isFirstLogin,
                            status,
                            compNo
                        } = userZcVo; /*信息太多，取需要的存*/
                        // status:  0-注册待审核 1-修改待审核 2-审核通过 3-注册不通过 4-修改不通过    1/2/4可以登录 0/3不允许登录
                        setToken(token||"");
                        setUserInfo({
                            id,email,qq,
                            userId,
                            name,
                            sex,
                            orgname,
                            idcard,
                            areacode,
                            telphone,
                            compName,
                            compSpec,
                            userType,
                            isFirstLogin,
                            compNo
                        });
                        switch (status) {
                            case 0:
                            this.$dialog.alert({
                                message: '您的信息还在审核中,请稍后登录',
                                confirmButtonColor: "#333",
                                confirmButtonText: "确定"
                            }).then(() => {
                                // on close
                            });
                            return;
                            case 1:
                                this.$dialog.alert({
                                    message: '您修改的单位信息,待审核中',
                                    confirmButtonColor: "#333",
                                    confirmButtonText: "确定"
                                }).then(() => {
                                    this.$router.push('/')
                                });
                                return;
                            case 2:
                                if (isFirstLogin === 0) {
                                    this.navTo('/improveInfo')
                                } else {
                                    this.$router.push('/')
                                }
                                return;
                            case 3:
                                this.$dialog.alert({
                                    message: `您的注册信息未通过，请重新注册。不通过原因为：${reject_reason}`,
                                    confirmButtonColor: "#333",
                                    confirmButtonText: "去注册"
                                }).then(() => {
                                    this.$router.push('/register')
                                });
                                return;
                            case 4:
                                this.$dialog.alert({
                                    message: '您上次修改的单位信息,未通过审核！原因为：',
                                    confirmButtonColor: "#333",
                                    confirmButtonText: "确定"
                                }).then(() => {
                                    this.$router.push('/')
                                });
                                return;
                            default:
                                return
                        }
                    }
                }).catch(err => {
                    this.isLogin = false;
                })
            },
            navTo(path) {
                if (path) {
                    this.$router.push(path)
                }
            },
            //密码显隐
            showPass() {
                this.$refs.passInput.focus();
                this.passFlag = !this.passFlag;
            },
            //切换登录方式
            handType() {
                this.loginType = !this.loginType,
                    this.info.checkCode = "";
                this.info.password = "";
                this.TypeText = this.loginType ? '密码登录' : "验证码登录"
            },
            //获取验证码
            getCode() {
                if (!this.info.username.length) {
                    this.$toast('请输入手机号');
                } else if (isPhone(this.info.username)) {
                    this.$toast('手机号码不规范');
                } else {
                    this.timer = setInterval(()=>{
                        this.count -- 
                        if(this.count<=0){
                            clearInterval(this.timer);
                            this.count = 60;
                        }
                    },1000)
                    createTelphonCode({
                        "checkType": 1,
                        "telphone": this.info.username
                    }).then(res=>{
                        const {value,success} = res;
                        if(success){
                            this.$toast('短信验证码发送成功，请注意查收!')
                            this.info.checkCode = value
                        }else{
                            clearInterval(this.timer);
                            this.count = 60;
                            this.$toast(res.exceptionContent)
                        }
                    }).catch(err=>{
                        clearInterval(this.timer);
                        this.count = 60;
                        this.$toast('发送失败,请联系管理员处理或重试!')
                    })
                }
            },
        }
    }
</script>

<style lang="scss">
    :root {
        --borderColor: rgba(214, 219, 226, .5); //输入框边框线
    }

    .login-pages {
        padding: 10px;

        .van-cell {
            height: 44px;
            padding: 0 14px;
        }

        .van-field__body {
            height: 44px;
            padding: 0;

            input {
                height: 100%;
            }
        }

        .van-cell-group {
            border: 1px solid var(--borderColor);
        }

        [class*=van-hairline]::after {
            border: none;
        }

        .van-cell::after {
            border: none;
        }

        .has-bottom-border {
            border-bottom: 1px solid var(--borderColor);
        }

        .main_content {
            background: #fff;
            padding: 73px 35px 50px;
            border-radius: 5px;

            .logo {
                width: 88px;
                height: 88px;
                display: block;
                margin: 0 auto 32px;
            }

            .send-code-btn {
                font-size: 15px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.4);
            }

            .allowed {
                color: #1990FF;
            }

            .pass-login {
                font-size: 15px;
                font-weight: 400;
                color: #1990FF;
                text-align: center;
                margin-top: 15px;
            }
        }

        .bottom-link {
            padding: 15px 0;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
        }

        .password-icon {
            font-size: 20px;
            color: #999;
            line-height: 37.5px;
        }

        .is-show {
            color: #333;
        }
    }
</style>
